<template>
  <div class="stats-pie-chart">
    <el-card>
      <div class="pie-chart-header">
        <span class="pie-chart-title">本年度各类型业务占比分析</span>
        <el-select v-model="selectedType" style="width:170px;margin-left:18px;">
          <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div ref="pieRef" class="pie-chart-content"></div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'

// 多种业务类型可切换
const typeOptions = [
  { label: '修复项目类型占比', value: 'projectType' },
  { label: '废弃物利用构成', value: 'wasteType' },
  { label: '资金来源结构', value: 'fundType' }
]
const selectedType = ref('projectType')

// 模拟数据
const dataMap: Record<string, { name: string; value: number }[]> = {
  projectType: [
    { name: '土壤修复', value: 18 },
    { name: '水体治理', value: 10 },
    { name: '生态景观', value: 8 },
    { name: '污染场地', value: 6 },
    { name: '其他', value: 4 }
  ],
  wasteType: [
    { name: '混凝土', value: 22 },
    { name: '金属', value: 9 },
    { name: '塑料', value: 6 },
    { name: '砖瓦', value: 5 },
    { name: '其他', value: 3 }
  ],
  fundType: [
    { name: '政府资金', value: 21 },
    { name: '企业自筹', value: 12 },
    { name: '绿色信贷', value: 8 },
    { name: '社会投资', value: 5 },
    { name: '其他', value: 4 }
  ]
}

const pieRef = ref<HTMLDivElement>()

function renderPieChart() {
  if (pieRef.value) {
    const data = dataMap[selectedType.value]
    const chart = echarts.init(pieRef.value)
    chart.setOption({
      tooltip: { trigger: 'item' },
      legend: {
        bottom: 24,
        orient: 'horizontal'
      },
      series: [{
        type: 'pie',
        name: '占比分析',
        radius: ['42%', '68%'],
        itemStyle: { borderRadius: 8, borderColor: '#fff', borderWidth: 2 },
        label: {
          show: true,
          position: 'outside',
          fontSize: 15,
          formatter: '{b}\n{d}%',
          overflow: 'truncate'
        },
        labelLine: {
          show: true,
          length: 18,
          length2: 14,
          smooth: true
        },
        labelLayout: {
          hideOverlap: true,
          moveOverlap: 'shiftY'
        },
        data
      }],
      color: ['#409EFF', '#67C23A', '#E6A23C', '#13C2C2', '#F56C6C']
    })
    window.addEventListener('resize', () => chart.resize())
  }
}

onMounted(renderPieChart)
watch(selectedType, renderPieChart)
</script>

<style scoped>
.stats-pie-chart {
  width: 100vw;
  min-height: 100vh;
  padding: 36px 0 0 0;
  background: linear-gradient(120deg,#f8fff7 60%,#e6f7ff 100%);
  overflow: auto;
}
.pie-chart-header {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}
.pie-chart-title {
  font-size: 18px;
  font-weight: bold;
  color: #308d2d;
}
.pie-chart-content {
  width: 100%;
  min-height: 460px;
  height: 60vh;
}
</style>
